<!--
 * @Author: maomao
 * @Date: 2021-04-21 15:20:54
 * @Description: 字典菜单
 * @FilePath: \dictionary-web\src\layouts\dictionaries-toobar.vue
-->
<template>
  <div class="side-nav-outer-toolbar">
    <HeaderBar class="layout-header" title="字典归属" @change="onValueChange" />
    <div class="area">
      <!-- <TreeLeft :item='formData' v-if="formData.solutionId" /> -->
      <NavigationList :item='formData' :key="formData.catalogId + formData.solutionId" v-if="formData.solutionId" />
      <dx-scroll-view ref="scrollViewRef" class="with-footer">
        <slot />
        <slot name="footer" />
      </dx-scroll-view>
    </div>
  </div>
</template>

<script lang='ts'>
import DxDrawer from "devextreme-vue/drawer";
import DxScrollView from "devextreme-vue/scroll-view";
import HeaderBar from "@/components/header-bar.vue";
import NavigationList from "@/components/navigation-list.vue";
import TreeLeft from "@/components/tree-left.vue";
import { Inject, Options, Vue } from "vue-property-decorator/lib";
import { ApiTool } from "@/api/api-tool";
@Options({
  props: {
    isXSmall: Boolean,
    isLarge: Boolean,
  },
  components: {
    DxDrawer,
    DxScrollView,
    HeaderBar,
    TreeLeft,
    NavigationList,
  },
})
export default class DictionariesToobar extends Vue {
  formData = {
    catalogId: "",
    grade: 1,
    solutionId: "",
  };

  isUpdate = false

  @Inject()
  apiTool: ApiTool;

  onValueChange(e) {
    this.formData = e;
  }

}
</script>

<style lang="scss">
@import "../themes/generated/variables.additional.scss";
.side-nav-outer-toolbar {
  flex-direction: column;
  display: flex;
  height: 100%;
  width: 100%;
}

.area {
  display: flex;
  height: calc(100% - 60px);
}

.layout-header {
  z-index: 1501;
}

.layout-body {
  flex: 1;
  min-height: 0;
}

.content {
  flex-grow: 1;
}
</style>

